<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix = "c"  uri = "http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <link rel="stylesheet" type="text/css"  href="css/bootstrap.min.css"/>
    
	<title>凯胜项目管理系统</title>
	<style type="text/css">
		body{
			padding-top:60px;
		}
		.more{
			display:none;
		}
		 .gmap3{
			border: 1px dashed #c0c0c0;
			width: 500px;
			height: 250px;
			
		 }
	</style>
	

  </head>
  
  <body class="body">
  
<div id="any"  class="gmap3 more " name = "" ></div>
	<%@include file="same2.jsp" %>
	<div class="container">
		<div class="row">
			<%@include file="same.jsp" %>
			<div class="span9">
				<ul class="breadcrumb" style="margin-bottom:0px;border-radius: 3px 3px 0 0">
				<li class="active">
					<a href="task.html"><i class="icon-user"></i>联系人</a>
				</li>
			</ul>
			<div class="wall" style="border-top:none; border:1px solid #dddddd;">
				<div class="row"style="margin-top:20px;margin-bottom:20px" >
				
					<div class="span3" >
						<div style="margin-left:25px"><a href="contact.jspx?method=add" class="btn span2"><i class="icon-plus"></i>添加联系人</a></div>
						<div class="clear"></div>
							<div style="margin-top:20px"  >
									<c:choose>
										<c:when test = "${empty requestScope.contactList.list }">
											<br><br><br>      <span style = "text-align:center;"> &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp;    暂时还没有联系人！</span>
										</c:when>
										<c:otherwise>
											<c:forEach items = "${requestScope.contactList.list }" var = "contact">
												<ul class="unstyled" ><br>
												<li style="line-height:30px">
													<div style="margin-left:20px"><i class="icon-list-alt"></i><a class = "myclick" id="${contact.address}" name = "${contact.id}" style="cursor:pointer">${contact.name }</a></div>
												</li>
												</ul>
											</c:forEach>
											<div style = "margin-top:310px;margin-left:50px">
												
											   <c:choose>
											   <c:when test="${requestScope.contactList.totalPage == 1}">
											   	
											   
											   </c:when>
											   <c:when test="${requestScope.contactList.totalPage > 1}">
											   ${requestScope.contactList.pageNum}/${requestScope.contactList.totalPage}
											   	<c:choose>
											   	<c:when test="${requestScope.contactList.pageNum == 1 }">
											   		首页
											   	</c:when>
											   	<c:otherwise>
											   		<a href = "contact.jspx?p=1">首页</a>
											   	</c:otherwise>
											   
											   
											   </c:choose>
											   <c:choose>
											   	<c:when test="${requestScope.contactList.pageNum == 1 }">
											   		上一页
											   	</c:when>
											   	<c:otherwise>
											   		<a href = "contact.jspx?p=${requestScope.contactList.pageNum-1 }">上一页</a>
											   	</c:otherwise>
											   
											   
											   </c:choose>
											    <c:choose>
											   	<c:when test="${requestScope.contactList.pageNum == requestScope.contactList.totalPage }">
											   		下一页
											   	</c:when>
											   	<c:otherwise>
											   		<a href = "contact.jspx?p=${requestScope.contactList.pageNum+1 }">下一页</a>
											   	</c:otherwise>
											   
											   
											   </c:choose>
											   <c:choose>
											   	<c:when test="${requestScope.contactList.pageNum == requestScope.contactList.totalPage }">
											   		尾页
											   	</c:when>
											   	<c:otherwise>
											   		<a href = "contact.jspx?p=${requestScope.contactList.totalPage }">尾页</a>
											   	</c:otherwise>
											   
											   
											   </c:choose>
											   	
											   	
											   	
											   	
											   	
											   	 </c:when>
											   	</c:choose>
											   
											   
											   
											  
											   	
											
											
											
											</div>
											
										</c:otherwise>
									</c:choose>
								
							</div>
					</div>
					<div class="span5" style="min-height:400px;border-left:1px solid #ccc;padding-left:15px;display:block">
						
							<c:choose>
							<c:when test=" ${ empty requestScope.contactList.list}">
							
							</c:when>
							<c:when test="${not empty requestScope.contactList.list && empty param.id }">
								<div id = "moren"><address>
									<h3>${contactMoren.name }</h3> <img src ="myshow.jspx?id=${contactMoren.id }" style = "float:right"/>
									<p></p>${contactMoren.company }<br/><br/>
									<small>手机:</small>  ${contactMoren.cellphone }<br/><br/>
									<small>固话:</small>  ${contactMoren.telphone }<br/><br/>
									<small>邮箱:</small>  ${contactMoren.email }<br/><br/>
									<div id = "myaddress1" class = "box"  style="cursor:hand;width:200px;"><small>地址:</small><span id = "myaddress">${contactMoren.address }</span><br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a id = "toMap" href = "javascript:;">[点击可查看地图]</a></div>
									<!--  <div style = "width:250px;height:100px" OnMouseOver="player('any');" onMouseOut="clocer('any');"></div>-->	
									<br/><small>主页:</small> <a href="${contactMoren.mainpage }">${contactMoren.mainpage }</a><br/><br/>
									<small>微博:</small> <a href="${contactMoren.webUrl }">@${contactMoren.web }</a><br/>
								</address>
								<div class="line">记录</div>
								<c:choose>
									<c:when test="${  empty contactMoren.list}">
										暂时没有记录！
							
									</c:when>
									<c:otherwise>
										<c:forEach items ="${  contactMoren.list.list}" var = "record" begin ="0" end ="2">
											<blockquote>
											  ${record.content }
									 		 <small>${record.user.username }发布于 ${record.createtime }</small>
											</blockquote>
										</c:forEach>
										<a href="contact.jspx?method=toAllRecord&id=${contactMoren.id }">查看所有记录</a>
										<br/><br/><br/>
										<a class="btn btn-primary" href="contact.jspx?method=edit&id=${contactMoren.id }"><i class="icon-pencil icon-white"></i>编辑</a>
										<a class="btn btn-danger" id = "del" style = "cursor:pointer"><i class="icon-trash icon-white" ></i>删除</a>
										<div class = "modal hide " id="mymodal" >
										<div class = "modal-header">
														<input type="button" value="x" style = 'color:black' class = "close" data-dismiss = "modal"/>
														<h3>删除联系人</h3>
													</div>
												<div class = "modal-body" style = "text-align:center;height:40px;margin-top:30px">
													<div >你确定要删除联系人       <span style = "color:red;font-size:20px;font-weight:bold">${contactMoren.name}</span>？</div>		
												</div>
												<div class = "modal-footer">
													<a href="contact.jspx?method=del&id=${contactMoren.id }" class = "btn btn-primary"   >是</a>
													<a href="" class = "btn" data-dismiss = "modal" >否</a>
												</div>
											</div>
									</c:otherwise>
								</c:choose>
								</div>
							</c:when >
							<c:when test = "${not empty contactRecord  }">
								<img src ="myshow.jspx?id=${contactRecord.id }" style = "float:right" />
								<address>
									<h3>${contactRecord.name }</h3>
									<p></p>${contactRecord.company }<br/><br/>
									<small>手机</small>  ${contactRecord.cellphone }<br/><br/>
									<small>固话</small>  ${contactRecord.telphone }<br/><br/>
									<small>邮箱</small>  ${contactRecord.email }<br/>
									<div id = "myaddress1" class = "box"  style="cursor:hand;width:200px;"><small>地址:</small><span id = "myaddress">${contactRecord.address }</span><br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a id = "toMap" href = "javascript:;">[点击可查看地图]</a></div>
									<small>主页</small> <a href="${contactRecord.mainpage }">${contactRecord.mainpage }</a><br/>
									<small>微博</small> <a href="${contactRecord.webUrl }">@${contactRecord.web }</a><br/>
								</address>
								<div class="line">记录</div>
									<c:choose>
										<c:when test="${ empty contactRecord.list}">
											暂时没有记录！
							
										</c:when>
										<c:otherwise>
											<c:forEach items ="${  contactRecord.list.list}" var = "record">
												<blockquote>
										 		 ${record.content }
									 	 		<small>${record.user.username }发布于 ${record.createtime }</small>
												</blockquote>
											</c:forEach>
											<a href="contact.jspx?method=toAllRecord&id=${contactRecord.id }">查看所有记录</a>
											<br/><br/><br/>
											<a class="btn btn-primary" href="contact.jspx?method=edit&id=${contactRecord.id }"><i class="icon-pencil icon-white"></i>编辑</a>
											<a class="btn btn-danger" id = "del" style = "cursor:pointer" id = "mydel"><i class="icon-trash icon-white"></i>删除</a>
									</c:otherwise>
									</c:choose>
							</c:when>
							</c:choose>		
						<div id = "mydivContact" style = "display:none">
								<img id = "myimg"  style = "float:right" />
								<address>
									<h3 id = "xmlContactName"></h3>
									<p id = "xmlCompany"></p><br/><br/>
									<small>手机:</small>  <span id = "xmlcell"></span><br/><br/>
									<small>固话:</small>  <span id = "xmltel"></span><br/><br/>
									<small>邮箱:</small>  <span id = "xmlemail"></span><br/><br/>
									<div id = "myaddress1" class = "box"  style="cursor:hand;width:200px;"><small>地址:</small><span id = "myaddress22"></span><br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a id = "toMap" href = "javascript:;">[点击可查看地图]</a></div>
									<br/><small>主页:</small> <a  id = "amainpage" href=""><span id = "xmlmainpage"></span></a><br/><br/>
									<small>微博:</small> <a id = "aweb" href="">@<span id = "xmlweb"></span></a><br/><br/>
								</address>
								<div class="line">记录</div>
								<div id = "append">
								</div>
								<a id ="myhref" >查看所有记录</a>
											<br/><br/><br/>
											<a class="btn btn-primary" id = "myedit" href=""><i class="icon-pencil icon-white"></i>编辑</a>
											<a class="btn btn-danger" id = "mydelContact" style = "cursor:pointer" ><i class="icon-trash icon-white"></i>删除</a>
											<div class = "modal hide "  id="modaldel" >
											<div class = "modal-header">
														<input type="button" value="x" style = 'color:black' class = "close" data-dismiss = "modal"/>
														<h3>删除联系人</h3>
													</div>
												<div class = "modal-body" style = "text-align:center;height:40px;margin-top:30px">
													<div >你确定要删除联系人       <span id = "delName" style = "color:red;font-size:20px;font-weight:bold"></span>？</div>		
												</div>
												<div class = "modal-footer">
													<a  id = "todelContact" class = "btn btn-primary"   >是</a>
													<a href="" class = "btn" data-dismiss = "modal" >否</a>
												</div>
											</div>
							</div>
						
						
						
						
				</div>
			</div>
		</div>
	</div>
</div>

	<script type="text/javascript" src="js/jquery.js"></script>
	<script type="text/javascript" src = "js/bootstrap.min.js"></script>
    <script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
    <script type="text/javascript" src="js/gmap3.js"></script> 
	<script type="text/javascript">
		$(document).ready(function(){
			$("#myid li").eq(6).addClass("active");
			$("#myid i").eq(4).addClass("  icon-white");
			$("#del").click(function(){
				$("#mymodal").modal("show");
			
			
			});
			$("#toMap").live("mousedown",function(e){
				var selfX=e.pageX;
				var selfY=e.pageY-250;
				$(".more").css({
					"display":"block",
					"position":"absolute",
					"top":selfY,
					"left":selfX,
					"z-index":"1"
					}	
				);
			});
			$(".more").mousemove(function(){
				$(this).css("display","block");
			
			
			});
			$(".more").mouseout(function(){
				$(this).css("display","none");
			
			
			});
			
			$("#mydelContact").click(function(){
				$("#modaldel").modal("show");
			
			
			});
			
			
				var xmlHttp;
  	
			  	function createXMLHttpRequest(){
			  		if(window.ActiveXObject){
			  		    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
			  		
				  	}else{
				  		xmlHttp = new XMLHttpRequest();
				  		
			  		}
			  	}
			  	
			$(".myclick").click(function(){
				createXMLHttpRequest();
				
				
				var value =$(this).attr("name");
				
				
				xmlHttp.open("get","contact.jspx?method=singleContactXml&id="+value,true);
				
				xmlHttp.onreadystatechange = callBack;
				
				xmlHttp.send();
				
				
			
			});
			function callBack(){
				if(xmlHttp.readyState == 4){
					if(xmlHttp.status == 200){
						var result = xmlHttp.responseXML;
						var contact = result.getElementsByTagName("contact")[0];
						var name = contact.getElementsByTagName("name")[0].childNodes[0].nodeValue;
						$("#xmlContactName").html(name);
						$("#delName").html(name);
						var id = contact.getElementsByTagName("id")[0].childNodes[0].nodeValue;
						$("#myhref").attr("href","contact.jspx?method=toAllRecord&id="+id);
						$("#myedit").attr("href","contact.jspx?method=edit&id="+id);
						$("#myimg").attr("src","myshow.jspx?id="+id);
						$("#todelContact").attr("href","contact.jspx?method=del&id="+id);
						var company = contact.getElementsByTagName("company")[0].childNodes[0].nodeValue;
						$("#xmlCompany").html(company);
						
						var cellphone = contact.getElementsByTagName("cellphone")[0].childNodes[0].nodeValue;
						$("#xmlcell").html(cellphone);
						
						var address = contact.getElementsByTagName("address")[0].childNodes[0].nodeValue;
						
						$("#myaddress22").html(address );
						var tel = contact.getElementsByTagName("tel")[0].childNodes;
						if(tel.length!=0){
							var t = tel[0].nodeValue;
							$("#xmltel").html(tel);
							
						}
						var email = contact.getElementsByTagName("email")[0].childNodes;
						if(email.length!=0){
							var e = email[0].nodeValue;
							$("#xmlemail").html(e);
						}
						var mainpage =contact.getElementsByTagName("mainpage")[0].childNodes;
						if(mainpage.length !=0){
							var mpage = mainpage[0].nodeValue;
							$("#xmlmainpage").html(mpage);
							$("#amainpage").attr("href",mpage);
						}
						var web = contact.getElementsByTagName("web")[0].childNodes;
						if(web.length!=0){
							var w=web[0].nodeValue;
							$("#xmlweb").html(w);	
						}
						var weburl = contact.getElementsByTagName("weburl")[0].childNodes;
						if(weburl.length !=0){
							var wu = weburl[0].nodeValue;
							$("#aweb").attr("href",wu);
						
						}
						var recordList = contact.getElementsByTagName("recordlist")[0];
						var itemArrary = recordList.getElementsByTagName("item");
						//alert(itemArrary.length);
						$("#append blockquote").remove();
						if(itemArrary.length<3 && itemArrary.length>0){
							
							for(var i=0;i<itemArrary.length;i++){
								var itemrecord = itemArrary[i];
								var recordname = itemrecord .getElementsByTagName("recordname")[0].childNodes[0].nodeValue;
								var recordcontent = itemrecord .getElementsByTagName("recordcontent")[0].childNodes[0].nodeValue;
								var createtime = itemrecord .getElementsByTagName("createtime")[0].childNodes[0].nodeValue;
								$("<blockquote><span id = 'xmlRecordContent'></span><small><span id = 'xmlRecordName'></span> 发布于<span id = 'xmlcreatetime'></span></small</blockquote>").appendTo($("#append"));
								$("#append blockquote:eq(i) #xmlRecordContent").html(recordcontent);
								$("#append blockquote:eq(i) #xmlRecordName").html(recordname);
								$("#append blockquote:eq(i) #xmlcreatetime").html(createtime);
									
							}
						
						}else{
							//alert("大于3");
							for(var i=0;i<3;i++){
								var itemrecord = itemArrary[i];
								var recordname = itemrecord .getElementsByTagName("recordname")[0].childNodes[0].nodeValue;
								//$("#xmlRecordName"+i).html(recordname);
								var recordcontent = itemrecord .getElementsByTagName("recordcontent")[0].childNodes[0].nodeValue;
								//$("#xmlRecordContent"+i).html(recordcontent);
								var createtime = itemrecord .getElementsByTagName("createtime")[0].childNodes[0].nodeValue;
								//$("#xmlcreatetime"+i).html(createtime );
								$("<blockquote><span id = 'xmlRecordContent'>"+recordcontent+"</span><small><span id = 'xmlRecordName'+i>"+recordname+"</span> 发布于<span id = 'xmlcreatetime'>"+createtime+"</span></small</blockquote>").appendTo($("#append"));
								/*var v = $("#append blockquote").eq(i);
								alert(v);
								$("#xmlRecordContent").html(recordcontent);
								$("#xmlRecordName").html(recordname);
								$("#xmlcreatetime").html(createtime);*/
							
							}
						
						
						
						}
						
					}
				
				}
			
			
			
			};
		});
			
		
	</script>
	<script>
	var v ;
	$(".myclick").click(function(){
		$("#mydivContact").css("display","block");
		$("#moren").css("display","none");
		v = $(this).attr("id");
		$("#any").attr("name",v);
		
	
	});
	$(function(){
	$('#any').gmap3(
	  {
		action: 'addInfoWindow',
		address:$("#myaddress").html(),
		
		map:{
		  center: true,
		  zoom: 14
		},
		infowindow:{
		  options:{
			size: new google.maps.Size(50,50),
			content: 'Hello World !'
		  },
		  events:{
			closeclick: function(infowindow){
			  //alert('closing : ' + $(this).attr('id') + ' : ' + infowindow.getContent());
			}
		  },
		  apply:[
			{action:'setContent', args:[$("#myaddress").html()]}
		  ]
		}
	  },
	  {action: 'setOptions', args:[{scrollwheel:true}]}
	);
	
	});
	
	
	
	</script>
</body>
</html>
